{include file="common/header"}
<div id="app" v-cloak>
    <el-container class="el-layout">
        <el-tabs v-model="tab" :tab-position="position">
			<el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item" :name="String(index)"></el-tab-pane>
        </el-tabs>
        <el-container>
            <el-curd 
                ref="curd" 
                :field="field" 
                :search-init="false" 
                :table-sort="{prop: 'create_time', order: 'desc'}" 
                search-keyword="根据订单号/用户ID搜索">
                <template v-slot:operation="row">
                    <a v-if="row.status == 1" href="javascript:;" @click="confirmPayment(row.id)">确认付款</a>
                </template>
            </el-curd>
        </el-container>
    </el-container>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                position: document.body.clientWidth > 768 ? 'left' : 'top',
                tab: window.location.hash === "" ? '0' : window.location.hash.replace('#', ''),
                tabs:['全部', '待支付', '已支付', '已完成', '已失效'],
                field: [
                    {
                        prop: 'user_cover', 
                        label: '',
                        table: {
                            is: 'el-image',
                            width: '50px'
                        },
                        form: false,
                    },
                    {
                        prop: 'user_id', 
                        label: '用户信息',
                        table: {prop: 'user_mobile', bind: ['user_email'], sort: true},
                        form: false,
                    },
                    {
                        prop: 'id',
                        label: '订单号',
                        table: {sort: true},
                    },
                    {
                        prop: 'pay_rmb', 
                        label: '充值金额', 
                        form: false,
                        table: {sort: true},
                    },
                    {
                        prop: 'method', 
                        label: '充值方式',
                        form: false,
                        table: {sort: true},
                    },
                    {
                        prop: 'pay_time', 
                        label: '充值时间',
                        table: {sort: true},
                        form: false,
                    },
                    {
                        prop: 'status', 
                        label: '状态', 
                        table: {prop: 'c_status', sort: true},
                        form: false
                    },
                ],
            }
        },
        mounted () {
            let self = this;
            window.onresize = function(){
                self.position = document.body.clientWidth > 768 ? 'left' : 'top';
            };
        },
        created() {
	        this.$nextTick(()=>{
	            this.searchData();
	        })
	    },
	    methods: {
            // 搜索
            searchData() {
                this.$refs.curd.search = Object.assign({}, this.$refs.curd.search, {page: 1, status: this.tab});
            },
            // 确认付款
            confirmPayment(id) {
                let self = this; 
                self.$confirm('确定此订单已经付款吗？修改立即支付后将无法恢复，请谨慎操作！', '', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
                    request.post("userrecharge/index/confirmPayment", {'id': id}, function(res){
                        if (res.status === 'success') {
                            self.searchData();
                        }
                        self.$notify({ showClose: true, message: res.message, type: res.status});
                    });
                }).catch(() => {});
            },
	    },
	    watch: {
	        tab(name) {
	            // 锚点
    		    let path = parent.parentVm.path.split('#');
    		    parent.parentVm.path = path[0] + '#' + name;
	            this.searchData();
	        }
	    }
    })
</script>
{include file="common/footer"}